<template>
  <div id="app">
    <div class="tabs">
          <!-- 父组件向子组件传值: 父组件在子组件身上通过自定义属性传值,子组件内部通过props接收值 -->
          <!-- 子组件向父组件传值: 父组件提前在子组件身上绑定自定义事件,子组件内部通过$emit触发事件并传值 -->
          <!-- 兄弟组件间传值: 需要借助一个公共的eventbus (通信管道)  其中一个组件提前绑定事件,另外一个兄弟组件去触发事件并传值 -->
          <!-- 跨组件传值: 外层组件通过provide传值, 内层组件通过inject接收值. -->
          <!-- 渲染左侧分类 -->
          <TabLeft :tabs="tabs"></TabLeft>
          <!-- 渲染右侧列表 -->
          <!-- 父向子传值 父组件在子组件身上定义属性，子组件通过props -->
          <TabRight :tabs="tabs"></TabRight>
    </div>
  </div>
</template>

<script>
//导入图片
import pic1 from './assets/pic1.jpg'
import pic2 from './assets/pic2.png'
import pic3 from './assets/pic3.png'

//导入组件
import TabLeft from './components/TabLeft.vue'
import TabRight from './components/TabRight.vue'


export default {
    data() {
        return {
            tabs: [
                {
                    tabName: "三文鱼",
                    list: [
                        { pic: pic1, name: "三文鱼", price: 45 },
                        { pic: pic1, name: "高级三文鱼", price: 55 },
                        { pic: pic1, name: "vip三文鱼", price: 65 },
                    ]
                },
                {
                    tabName: "刺身",
                    list: [
                        { pic: pic2, name: "刺身", price: 45 },
                        { pic: pic2, name: "高级刺身", price: 55 },
                        { pic: pic2, name: "vip刺身", price: 65 },
                    ]
                },
                {
                    tabName: "大虾",
                    list: [
                        { pic: pic3, name: "大虾", price: 45 },
                        { pic: pic3, name: "高级大虾", price: 55 },
                        { pic: pic3, name: "vip大虾", price: 65 },
                    ]
                },
            ]
        };
    },
  components: {
    TabLeft,
    TabRight
  },
  methods: {
    changelist (index){
      this.currentIndex = index;
    }
  }
}
</script>

<style lang="scss" scoped>
.tabs {
  display: flex;
}
</style>
